---
import { UserButton } from '@clerk/astro/components';
---

<UserButton>
  <UserButton.MenuItems>
    <UserButton.Action label='signOut' />
    <UserButton.Action label='manageAccount' />
    <UserButton.Link
      label='Custom link'
      href='/user'
    >
      <div slot='label-icon'>Icon</div>
    </UserButton.Link>
    <UserButton.Action
      label='Custom action'
      open='terms'
    >
      <div slot='label-icon'>Icon</div>
    </UserButton.Action>
    <UserButton.Action
      label='Custom click'
      clickIdentifier='custom_click'
    >
      <div slot='label-icon'>Icon</div>
    </UserButton.Action>
  </UserButton.MenuItems>
  <UserButton.UserProfilePage
    label='Terms'
    url='terms'
  >
    <div slot='label-icon'>Icon</div>
    <div>
      <h1>Custom Terms Page</h1>
      <p>This is the custom terms page</p>
    </div>
  </UserButton.UserProfilePage>
</UserButton>
